$(function(){
    // 1.需求: 输入时,判断用户名长度: 如果长度大于0,显示图标(re-x), 否则就隐藏
    $('.user , .pwd , .pwd-sure , .tel').keyup(function(){
        let len = $(this).val().length;

        if(len >0 ){
            
            $(this).next('.re-x').css('display','block')
            
        }else{
            
            $(this).next('.re-x').css('display','none')
            
        }
    })
    
    
    
    // 2.需求: 点击re-x 重置输入内容
    $('.re-x').click(function(){
        $(this).prev('.re-input').val('')
        $(this).css('display','none')
        $(this).next('.user-msg').css('display','none')
    })
    // 3 聚焦改变边框颜色 显示提示
    $('.re-input').focus(function(){
        $(this).closest('.register-li').css('border','1px solid black').siblings().css('border','1px solid #d9d9d9')
        $(this).siblings('.user-msg').css('display','block').closest('.register-li').siblings().find('.user-msg').css('display','none')
        // $(this).siblings('.user-msg').css('display','none')
    })

    // 
    $('.user').keyup(function(){
        let len = $(this).val().length;
        if(len>2){
            $(this).siblings('.re-icon').css('display','block')
        }else{
            $(this).siblings('.re-icon').css('display','none')
        }
    })
    //  标杆
    let fromFlag = {
        
        pwd:false,
        pwdsure:false,
        tel:false,
        prov:false
    }
    // 4 pwd失焦判断 改变边框颜色 字体颜色 显示re-icon

    $('.pwd').blur(function(){
        let reg = /^[a-zA-Z]\w{5,19}/
        let pVal = $(this).val()
        let result = reg.test(pVal)

        if(result){
            $(this).closest('.register-li').removeClass('error')
            fromFlag.pwd = true
        }else{
            $(this).closest('.register-li').addClass('error')
            $(this).siblings('.user-msg').text('密码长度6-20个字符，请重新输入')
            $(this).siblings('.re-icon').addClass('re-on')
            fromFlag.pwd = false
        }
    })

    $('.pwd').keyup(function(){
        let reg = /^[a-zA-Z]\w{5,19}/
        let pVal = $(this).val()
        let result = reg.test(pVal)

        if(result){
            $(this).siblings('.re-icon').css('display','block')
            $(this).closest('.register-li').removeClass('error')
            $(this).siblings('.re-icon').removeClass('re-on')
            $(this).siblings('.user-msg').text('密码为6-20位个字符,可由数字字母组成')
            fromFlag.pwd = true
        }else{
            $(this).siblings('.re-icon').css('display','none')
            fromFlag.pwd = false
        }
    })
    // pwd-sure
    $('.pwd-sure').blur(function(){
        let reg = $('.pwd').val()
        let pVal = $(this).val()

        if(reg == pVal){
            $(this).closest('.register-li').removeClass('error')
            fromFlag.pwdsure = true
        }else{
            $(this).closest('.register-li').addClass('error')
            $(this).siblings('.user-msg').text('两次密码不正确')
            $(this).siblings('.re-icon').addClass('re-on')
            fromFlag.pwdsure = false
        }
    })


    $('.pwd-sure').keyup(function(){
        let reg = $('.pwd').val()
        let pVal = $(this).val()
        

        if(reg == pVal){
            $(this).siblings('.re-icon').css('display','block')
            $(this).closest('.register-li').removeClass('error')
            $(this).siblings('.re-icon').removeClass('re-on')
            $(this).siblings('.user-msg').text('再次输入密码')
            fromFlag.pwdsure = true
        }else{
            $(this).siblings('.re-icon').css('display','none')
            fromFlag.pwdsure = false
        }
    })

    // tel
    $('.tel').blur(function(){
        let reg = /^[0-9]{6}/
        let pVal = $(this).val()
        let result = reg.test(pVal)

        if(result){
            $(this).closest('.register-li').removeClass('error')
            fromFlag.tel = true
        }else{
            $(this).closest('.register-li').addClass('error')
            $(this).siblings('.user-msg').text('请输入正确的手机号')
            $(this).siblings('.re-icon').addClass('re-on')
            fromFlag.tel = false
        }
    })


    $('.tel').keyup(function(){
        let reg = /^[0-9]{6}/
        let pVal = $(this).val()
        let result = reg.test(pVal)
        

        if(result){
            $(this).siblings('.re-icon').css('display','block')
            $(this).closest('.register-li').removeClass('error')
            $(this).siblings('.re-icon').removeClass('re-on')
            $(this).siblings('.user-msg').text('请输入手机号')
            fromFlag.tel = true
        }else{
            $(this).siblings('.re-icon').css('display','none')
            fromFlag.tel = false
        }
    })
    // prov
    $('.prov').blur(function(){
        let reg = $('.prov').next('.re-yz').text()
        let pVal = $(this).val()

        if(reg == pVal){
            $(this).closest('.register-li').removeClass('error')
            fromFlag.prov = true
        }else{
            $(this).closest('.register-li').addClass('error')
            $(this).siblings('.user-msg').text('验证不正确')
            $(this).siblings('.re-icon').addClass('re-on')
            fromFlag.prov = false
        }
    })


    $('.prov').keyup(function(){
        let reg = $('.prov').next('.re-yz').text()
        let pVal = $(this).val()
        

        if(reg == pVal){
            $(this).siblings('.re-icon').css('display','block')
            $(this).closest('.register-li').removeClass('error')
            $(this).siblings('.re-icon').removeClass('re-on')
            $(this).siblings('.user-msg').text('请输入图中验证码,区分大小')
            fromFlag.prov = true
        }else{
            $(this).siblings('.re-icon').css('display','none')
            fromFlag.prov = false
        }
    })
    // 登录
    $('.register-btn').click(function(){
        if(!fromFlag.pwd){
            alert('密码错误')
        }else if(!fromFlag.tel){
            alert('电话错误')
        }else if(!fromFlag.prov){
            alert('验证码错误')
        }else{
            alert('登录成功')
        }
    })
})